<!DOCTYPE html>
<html>
  <head>
    <title>图片合成预览</title>
    <meta
      name="viewport"
      content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--jquery-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

    <!--jquery.qrcode-->
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

    <!--fabric-->
    <script src="js/fabric/fabric.min.js"></script>

    <!--设计器组件-->
    <script src="js/design/design.js"></script>

    <script>
      //将canvas转换为img标签
      function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
      }
    </script>

    <!--业务适配器-->
    <script>
      /**
       *创建一张合成图片
       *
       * @param {*} el 输出到哪个dom节点
       * @param {*} width 图片的宽度
       * @param {*} height 图片的高度
       * @param {*} bgimg 背景图片
       * @param {*} goodprice 商品的价格
       * @param {*} goodimg 商品的图片
       * @param {*} goodname 商品的名称
       */
      function draw(
        el,
        width,
        height,
        bgimg,
        goodprice,
        goodimg,
        goodname,
        ewm
      ) {
        var design = new Design("canvas", {
          canvas: {
            el: el,
            width: width,
            height: height
          },
          ui: {
            type: "set",
            children: [
              {
                type: "image",
                x: 0,
                y: 0,
                width: width,
                height: height,
                tag: bgimg
              },
              {
                type: "image",
                x: 0,
                y: 0,
                width: 320,
                height: 150,
                tag: goodimg
              },
              {
                type: "image",
                x: 0,
                y: 0,
                width: 100,
                height: 100,
                tag: ewm
              },
              {
                type: "text",
                x: 100,
                y: 400,
                width: 50,
                height: 100,
                content: goodname,
                color: "black",
                size: 20
              },
              {
                type: "text",
                x: 200,
                y: 400,
                width: 100,
                height: 100,
                content: goodprice,
                color: "black",
                size: 30
              }
            ]
          }
        });
        return design;
      }
    </script>

    <script>
      //加载二维码的辅助方法
      var loadQrCode = function(el, content) {
        return new Promise(function(resolve, reject) {
          var base64 = $(el)
            .qrcode(content)
            .find("canvas")[0]
            .toDataURL("image/png");

          var img = new Image();
          img.onload = function() {
            resolve(img);
          };
          img.onerror = function() {
            reject(img);
          };
          img.src = base64;
        });
      };

      //加载成功后
      $(function() {
        //预加载所有的图片

        //图片加载器
        var imageLoader = Design.loadAllImgs([
          "https://upload.slikfresh.com/img1/20191112/eOvPVBc5RHVrHgBR_innnerhtml.jpg",
          "https://upload.slikfresh.com/img1/20191111/QeblT1AEdSDQHJfVokg_width."
        ]);
        //二维码生成器
        var qrcodeGen = loadQrCode("#qrcode", "http://www.baidu.com");

        //并发执行
        Promise.all([imageLoader, qrcodeGen])
          .then(function(data) {
            //加载的图片数据
            var imgs = data[0];
            //二维码
            var ewm = data[1];
            //创建分享图片
            var design = draw(
              "canvas",
              320,
              700,
              Design.getImgTag(
                "https://upload.slikfresh.com/img1/20191112/eOvPVBc5RHVrHgBR_innnerhtml.jpg",
                imgs
              ), //根据key找到对应回调的tag
              "30/斤",
              Design.getImgTag(
                "https://upload.slikfresh.com/img1/20191111/QeblT1AEdSDQHJfVokg_width.",
                imgs
              ), //根据key找到对应回调的tag
              "测试商品",
              ewm
            );

            //强制全部渲染完毕
            design.renderAll();
            //直接转换为图片
            var img = convertCanvasToImage(document.querySelector("#canvas"));
            img.width = 320;
            img.height = 700;
            //添加转换后的img即可长按保存
            $("#container").html("");
            $("#container").append($(img));
          })
          .catch(function(err) {
            console.log(err);
          });

        $("#convert").click(function() {
          //转换图片
          var img = convertCanvasToImage(document.querySelector("#canvas"));
          img.width = 320;
          img.height = 700;
          //添加转换后的img即可长按保存
          $("#container").html("");
          $("#container").append($(img));

          alert("转换成功");
          $("#convert").hide();
        });
      });
    </script>
  </head>
  <body>
    <!-- <img
      src="https://upload.slikfresh.com/img1/20191112/eOvPVBc5RHVrHgBR_innnerhtml.jpg"
      crossorigin=""
    /> -->
    <!-- <input id="convert" type="button" value="变换为image标签才可长按下载" /> -->
    <div id="container">
      <canvas id="canvas" width="320" height="700"></canvas>
    </div>
    <div id="qrcode" style="display: none;"></div>
  </body>
</html>
